<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 头部部分 -->
      <el-card class="tree-card">
        <tree-tool
          :node-tree="company"
          :is-root="true"
          @addDepts="addDeptsFn"
        />
        <!-- 树形结构 正文部分 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <tree-tool
            slot-scope="{data}"
            :node-tree="data"
            @DelDepts="getDepartments"
            @addDepts="addDeptsFn"
            @editDepts="editDeptsFn"
          />

        </el-tree>
      </el-card>
      <addDepts
        ref="addDept"
        :show-dialog.sync="isShowDialog"
        :add-tree="node"
        :people="people"
        @addDepts="getDepartments"
      />
    </div>
  </div>
</template>>

<script>
// 导入组件 树形结构 新增部门 弹出层
import TreeTool from './components/tree-tool'
import addDepts from './components/add-depts'

// 导入获取企业部门列表方法
import { getDepartmentsAPI, getEmployeeSimpleAPI } from '@/api'
// 导入转化成树形数据的方法
import { transListToTreeData } from '@/utils'
export default {
  components: {
    TreeTool,
    addDepts
  },
  data() {
    return {
      company: {},
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      isShowDialog: false, // 新增部门弹层
      node: {}, // 添加子部门的节点信息
      people: [] // 部门负责人
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取部门数据
    async getDepartments() {
      const res = await getDepartmentsAPI()
      console.log(res)
      this.company = { name: res.companyName, manager: '负责人', id: '' }
      this.departs = transListToTreeData(res.depts, '')
    },
    // 添加子部门 弹层显示
    async addDeptsFn(node) {
      // 显示弹层
      this.isShowDialog = true
      // 存储节点 添加子部门 需要节点信息
      this.node = node
      // 获取部门经理人的方法
      this.people = await getEmployeeSimpleAPI()
    },
    // 关闭弹层的方法一
    // changeDialogFn(value) {
    //   this.isShowDialog = value
    // }

    // 编辑子部门 弹层显示
    async editDeptsFn(node) {
      // 编辑 记录当前节点
      this.node = node
      // console.log(this.$refs.addDept)
      await this.$refs.addDept.getDetailDepartments(this.node.id)
      // 显示弹层 编辑和添加共用
      this.isShowDialog = true
      // 获取部门负责人
      this.people = await getEmployeeSimpleAPI()
      // 通过ref获取方法 传入id
      // console.log(this.$refs.addDept)
    }

  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}

</style>
